<template>
  <!-- 方案规划导航栏 -->
  <div style="width: 100%;height: 100%;text-align: center;">
 
  <div style="display: inline-flex;width: 100%;height: 98%;text-align: left;">
    
    <div style="width: 45%;height: 99%;margin: 1vh auto;margin-left:1vh;border-radius: 4px; background: #202b614f; border: 1px solid rgb(62 111 219 / 88%);">
            
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">规划结果</div>
      </div> 

      <div style="display:block;width: 96%;height: 60%;margin: 1vh auto;overflow:hidden;overflow-y: auto;">

                 
        <div v-for="item in pageInfo"  v-bind:key="item" style="display: block;width: 98%;height: 20%;margin: 2vh auto;border-bottom: 1px solid #4aafcf8f;">
          
          <div style="display: inline-flex;margin-top: 5px;">
            <img style="height: 24px;margin-top: 0.2vh;" src="../../assets/images/tips2.png">
            <div style="margin-left: 10px;margin-top:5px;font-family:emoji;color: #f2f2f2;font-size: 0.9vw;display: inline-flex;">
              {{item.plantName}} 到 {{ item.stationName }} 
              <div v-if="item.type=='1'">,采用<span style="color: #5de1ef;">{{ item.transportTypeLabel }}</span>方式，设计参数如下</div>
              <div v-if="item.type=='2'">,采用<span style="color: #4DEA74;">{{ item.transportTypeLabel }}</span>方式，设计参数如下</div>
              <div v-if="item.type=='0'"><span style="color: #75B3C1;"> {{ item.transportTypeLabel }}</span></div>

            </div>
          </div>
          <div v-if="item.type=='1'" style="color: #f2f2f2;font-size: 0.8vw;width: 100%;margin-top:1vh;display: inline-flex;">
            <div style="margin-left: 1vh;;">输氢压力：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue2}}</span> MPa</div> 
            <div style="margin-left: 2vh;;">拖车容积：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue3}}</span> m³</div> 
            <div style="margin-left: 2vh;;">拖车数量：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue4}}</span> 辆</div> 
            <div style="margin-left: 2vh;;">日输氢量：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue5}}</span> kg/d</div> 
          </div>

          <div v-if="item.type=='2'" style="color: #f2f2f2;font-size: 0.8vw;width: 100%;margin-top:1vh;display: inline-flex;">
            <div style="margin-left: 1vh;;">输氢压力：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue2}}</span> MPa</div> 
            <div style="margin-left: 2vh;;">管道内径：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue3}}</span> mm</div> 
            <div style="margin-left: 2vh;;">管道长度：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue4}}</span> km</div> 
            <div style="margin-left: 2vh;;">日输氢量：<span style="font-size: 0.9vw;font-weight: 400;color: #fff241;">{{item.dataValue5}}</span> kg/d</div> 
          </div>

        </div>

      

      </div>
  
    </div>


    <div style="width: 55%;height: 99%;margin: 5px auto;margin-left:0vh;text-align: center;">
      <div class="mapDiv" id="container"></div>
      <div style="display: none;" id="panel"></div>
    </div>
 

  </div>

  


</div>
  
</template>


<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
    }
</script>

<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=3c40b24a0968cfbc241dce18366a6553&plugin=AMap.Driving"></script>


<script>
import AMapLoader from "@amap/amap-jsapi-loader";

  export default {
    name: 'supplyDemandInfo',
    data() {
      return {
         pageInfo : [],
         projectId : '',
         map:{}
      }
    },
    mounted: function() {
      this.projectId = this.$route.query.projectId;
      this.initMap();
      this.$nextTick(function(){
        this.queryPageData();
      });
    },
    methods: {

      initMap : function() {

            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("container", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 8,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '2D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [117.120128,36.652069], //初始化地图中心点位置
                });
                  
            }).catch(e => {
                console.log(e);
            })


      },
 
      
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryPlanningResults?projectId='+this.projectId+"&tableName=ht_transportation_route").then((res) => {

          var pageInfo = res.data.data; 

          if(pageInfo){

            vm.pageInfo = pageInfo;
            
            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("container", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 6.5,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '2D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [117.120128,36.652069], //初始化地图中心点位置
                });
                    
                for(var i = 0;i<vm.pageInfo.length;i++){

                    //构造路线导航类
                  var driving = new AMap.Driving({
                      policy: AMap.DrivingPolicy.LEAST_DISTANCE,
                      map: vm.map,
                      showTraffic:false,
                      autoFitView:true,
                      extensions:"all",
                      panel: "panel"
                  }); 
      
      
                  var plantName = vm.pageInfo[i].plantName;
                  var stationName = vm.pageInfo[i].stationName;

                  var startLat = vm.pageInfo[i].p_lat;
                  var startLng = vm.pageInfo[i].p_lng;
            
                  var endLat = vm.pageInfo[i].s_lat;
                  var endLng = vm.pageInfo[i].s_lng;

                  
                  vm.addMarkerToMap(vm.map,startLng,startLat,plantName);
                  vm.addMarkerToMap(vm.map,endLng,endLat,stationName);


                  // 根据起终点经纬度规划驾车导航路线
                  driving.search(new AMap.LngLat(startLng, startLat), new AMap.LngLat(endLng, endLat), function(status, result) {
                        
                      // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                      if (status === 'complete') {
                        

                      } else {
                          
                      }
                        
                        
                    });


                }
                  
            }).catch(e => {
                console.log(e);
            })




                
                

          }else{
            
            window._AMapSecurityConfig = {
              securityJsCode: 'b6a7ea952a94b534734e60f1c322c5d8',
            } 

            AMapLoader.load({
                key: "3c40b24a0968cfbc241dce18366a6553", // 申请好的Web端开发者Key，首次调用 load 时必填
                
                version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                resizeEnable: true,
                plugins: [
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.ToolBar", //工具条
                    "AMap.Scale", // 比例尺
                    "AMap.Geolocation", //定位
                    "AMap.Geocoder",//经纬度进行逆地理编码查询
                    "AMap.Driving",//驾车导航
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                console.log(AMap);
                this.map = new AMap.Map("container", { //设置地图容器id
                    resizeEnable: true,
                    rotateEnable: true,
                    pitchEnable: true,
                    zoom: 6.5,
                    pitch: 80,
                    rotation: -15,
                    viewMode: '2D',//开启3D视图,默认为关闭
                    buildingAnimation: true,//楼块出现是否带动画
                    expandZoomRange: true,
                    zooms: [3, 20],
                    center: [117.120128,36.652069], //初始化地图中心点位置
                });
                  
            }).catch(e => {
                console.log(e);
            })

          }
        }).catch((error) => {
          console.log(error);
        });


      },

      
      addMarkerToMap : function(map,lng,lat,name){

        let Icon = new AMap.Icon({
          size: new AMap.Size(30, 30),
          image: require('../../assets/images/markIcon.png'),
          imageSize: new AMap.Size(30, 30),
          imageOffset:new AMap.Pixel(0,0),
        });

        let labelOffset = new AMap.Pixel(0,-5);


        var labelInfo = name;

        var labelContent = "<div style='width: 9vh;border-radius: 5px;height: 3vh;margin-top: -5.5vh;;background-image: linear-gradient(rgb(152 177 205), rgb(4 72 221 / 55%)); color: #f2f2f2;;text-align: center;font-size: 0.8vw;line-height: 3vh;'> "+labelInfo+" </div>";

        var marker = new AMap.Marker({
          position: new AMap.LngLat(lng,lat),
          icon: Icon,
          anchor: "bottom-center", //设置锚点
          offset: new AMap.Pixel(0, -5),
          label: {
            direction: "top",
            content: labelContent,
            offset: labelOffset,
          },
        }); 

        map.add(marker);

      },
      
      getMap : function() {
          
          //初始化map_,给map_对象增加方法，使map_像Map
          var map_ = new Object();
          map_.put = function(key, value) {
              map_[key+'_'] = value;
          };
          map_.get = function(key) {
              return map_[key+'_'];
          };
          map_.remove = function(key) {
              delete map_[key+'_'];
          };
          map_.keyset = function() {
              var ret = "";
              for(var p in map_) {
                  if(typeof p == 'string' && p.substring(p.length-1) == "_") {
                      ret += ",";
                      ret += p.substring(0,p.length-1);
                  }
              }
              if(ret == "") {
                  return ret.split(",");
              } else {
                  return ret.substring(1).split(",");
              }
          };
          return map_;
      },
      
      handleMapClick : function(e){
         

      },
      handleMapDblClick : function(e){
         
      },


      drivingPolicyChange : function(){
 


      },
 
    
    }
  }
</script>



<style>
  /deep/.el-input.is-disabled .el-input__inner {
      background-color: #4c5b7182;
      border-color: #E4E7ED;
      color: #C0C4CC;
      cursor: not-allowed;
  }
  /deep/ .el-form-item {
      margin-bottom: 5px;
  }
  /deep/ .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  /deep/.el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  /deep/.el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 
    
  /* 设定地图的大小 */
  .mapDiv{
    width: 98%; 
    height: 68.6vh;
    margin: 5px auto; 
    padding: 10px;
    border: 1px solid blue;
  }

  .titleDiv {
    width: 100%;
    margin: 0.5vh;
    height: 2.5vh; 
    font-weight: bold; 
    -webkit-box-shadow: none;
    box-shadow: none;
    font-weight: 700;
    font-style: normal;
    font-size: 2vh;
    color: #f2f2f2;
    text-align: left;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
  }
  .barColorBox {
    height: 2.5vh;
    width: 0.7vh;
    border-radius: 1px;
    display: inline-block;
    vertical-align: text-bottom;
    border: none;
    box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
    background-color: #FAFAFA;
    background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
    background-image: -o-linear-gradient(top,#17b4db,#07c968);
    background-image: -ms-linear-gradient(top,#17b4db,#07c968);
    background-image: linear-gradient(top,#17b4db,#07c968);
    background-repeat: repeat-x;
  }

  .titlefont {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 1.8vh;
      padding-left: 5px;
      margin-top: 0vh;
  }



  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #1f2c6c3b;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .disabledBox{
    width: 31vh;
    height: 15vh;
    margin: auto;
    border-radius: 4px;
    background: #1d244994;
    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
  .box{
    width: 31vh;
    height: 15vh;
    margin: auto; 
    border-radius: 4px; 
    background-image: linear-gradient(to bottom, #2946ad, #61dde37a);

    border: 1px solid rgb(62 111 219 / 88%);
    cursor: pointer;
  }
 
  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>


<style type="text/css">
       
  .amap-logo{
    display: none;
    opacity:0 !important;
    }
    .amap-copyright {
        opacity:0;
    }
</style>

<style lang="scss" scoped>

/deep/.amap-logo {
  
}
/deep/ .amap-marker-label {
  top: 20px !important;
  border: 0;
  background: transparent;

  .pointTxt {
    color: rgb(0, 0, 0);
    font-size: 14px;
    font-weight: 600;
    margin-left: 14px;
  }
}
/deep/.amap-marker {
  position: relative;
  height: 50px;
  .map-item__base {
    position: absolute;
    z-index: 9852432;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    top: -27px;
    left: -14px;
  }
 

  .arrowBox {
    position: absolute;
    height: 50px;
    top: -1px;
    left: 1px;
    img {
      position: absolute;
      height: 50px;
    }
  }
  .fontfamily {
    position: absolute;
    left: 5px;
    top: 4px;
    font-size: 34px;
  }
  .pointBox {
    position: absolute;
    left: 10px;
    top: 8px;
    width: 24px;
    height: 22px;

    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    img {
      display: inline-block;
      width: 16px;
    }
  }
}
</style>

